<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/root.css">
    <link rel="stylesheet" href="css/index.css">
        <script src="js/jquery-2.1.0.min.js"></script>
    
</head>
<body>
<div id="app">
    <div id="shortcut">
        <div class="width">
            <div>欢迎来到荣耀商城</div>
            <div>
                <a th:if="${not #strings.isEmpty(user)}" href="toLogin">
                    <span style="color: red;" th:text="${user.username}"></span>
                </a>
                <a th:if="${#strings.isEmpty(user)}" href="toLogin">登录</a>
            </div>
        </div>
    </div>
    <div id="headContent">
        <div id="header" class="width">
            <div id="logo">

            </div>
            <div>
                <div id="search">
                    <input type="text" v-model="searchTxt">
                    <button @click="search"><i class="iconfont">&#xe718;</i></button>
                </div>
                <div id="hotWords">
                </div>
            </div>
            <div id="QrCode">

            </div>
        </div>
        <div id="nav" class="width">
            <ul>
                <li><a href="#">导航1</a></li>
                <li><a href="#">导航2</a></li>
                <li><a href="#">导航3</a></li>
                <li><a href="#">导航4</a></li>
            </ul>
        </div>
    </div>
    <div id="goodsShow" class="width">
        <h3>热卖商品</h3>
        <div id="goods" class="width">
            <div class="cargo" v-for="item in filterArr">
                <div>{{item.name}}</div>
                <a :href="item.url+'?userid='+user+'&obj='+JSON.stringify(item)">
                    <img :src=item.path alt="">
                </a>
            </div>
        </div>
    </div>
</div>
<!-- <script src="../js/index.js"></script> -->
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
        	
        	/*  var contextPath= [[@{/}]];
                 $.post(contextPath+"good/goodList",
                     {
                	   search: this.searchTxt
                     },
                     function (data, status) {
                         if (data.code==0){
                             //alert("注册成功");
                             console.log(data);
                         }else{
                             alert("操作失败!"+data.msg);
                         }
                     }); */
        	
            return    {
                user: '',
                searchTxt: '',
                goodsArr: [
                    {url: './purchase.html', path: 'img/13.jpg', name: 'goods1', price: 55},
                    {url: './purchase.html', path: 'img/14.jpg', name: 'goods2', price: 55},
                    {url: './purchase.html', path: 'img/goods.webp', name: 'goods3', price: 55},
                    {url: './purchase.html', path: 'img/goods.webp', name: 'goods4', price: 55},
                    {url: './purchase.html', path: 'img/goods.webp', name: 'goods5', price: 55},
                    {url: './purchase.html', path: 'img/goods.webp', name: 'goods6', price: 55},
                    {url: './purchase.html', path: 'img/goods.webp', name: 'goods7', price: 55},
                    {url: './purchase.html', path: 'img/goods.webp', name: 'goods8', price: 55},
                    {url: './purchase.html', path: 'img/goods.webp', name: 'goods9', price: 55},
                    {url: './purchase.html', path: 'img/goods.webp', name: 'goods10', price: 55},
                    {url: './purchase.html', path: 'img/goods.webp', name: 'goods11', price: 55},
                    {url: './purchase.html', path: 'img/goods.webp', name: 'goods12', price: 55},
                ],
                filterArr: []
            }  
        },
        methods: {
            search() {
                this.filterArr = []
                if (this.searchTxt == '') {
                    this.goodsArr.forEach(item => {
                        this.filterArr.push(item)
                    });
                }
                this.goodsArr.forEach(item => {
                    if (item.name.search(this.searchTxt) != -1) {
                        this.filterArr.push(item)
                    }
                })
            }

        },
        created() {
            if (location.search != '') {
                this.user = ((location.search.split("?"))[1].split("="))[1]
            }
            this.goodsArr.forEach(item => {
                this.filterArr.push(item)
            });
        },
    })
</script>
</body>
</html>